<template>
	<view>
		<view class="header">
			<view class="title">手动录单</view>
		</view>

		<view class="content">
			<view class="form-card">
				<view class="form-item">
					<text class="label">用户ID</text>
					<input class="input" type="number" v-model="form.user_id" placeholder="请输入用户ID" />
				</view>
				<view class="form-item">
					<text class="label">溯源员工ID</text>
					<input class="input" type="number" v-model="form.clerk_user_id" placeholder="请输入溯源员工ID" />
				</view>
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" v-model="form.name" placeholder="请输入姓名" />
				</view>
				<view class="form-item">
					<text class="label">手机号</text>
					<input class="input" type="number" v-model="form.phone" placeholder="请输入手机号" />
				</view>
				<view class="form-item">
					<text class="label">是否支付</text>
					<view class="radio-group">
						<view class="radio-item" @click="form.order_status = 2" :class="{ active: form.order_status === 2 }">
							<text>已支付</text>
						</view>
						<view class="radio-item" @click="form.order_status = 1" :class="{ active: form.order_status === 1 }">
							<text>未支付</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="label">新客/老客</text>
					<view class="radio-group">
						<view class="radio-item" @click="form.customer_type = '新客'" :class="{ active: form.customer_type === '新客' }">
							<text>新客</text>
						</view>
						<view class="radio-item" @click="form.customer_type = '老客'" :class="{ active: form.customer_type === '老客' }">
							<text>老客</text>
						</view>
					</view>
				</view>
			</view>

			<button class="submit-btn" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/staff'
	import storage from '@/utils/storage'
	
	export default {
		data() {
			return {
				activityId: 0,
				form: {
					user_id: '',
					clerk_user_id: '',
					name: '',
					phone: '',
					order_status: 1,
					customer_type: '新客'
				}
			}
		},
		onLoad() {
			this.activityId = storage.get('activityId')
		},
		methods: {
			submitForm() {
				// 表单验证
				if (!this.form.user_id) {
					uni.showToast({
						title: '请输入用户ID',
						icon: 'none'
					})
					return
				}
				if (!this.form.clerk_user_id) {
					uni.showToast({
						title: '请输入溯源员工ID',
						icon: 'none'
					})
					return
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}

				// 提交表单
				api.createManualOrder({
					activity_id: this.activityId,
					...this.form
				}).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 1500)
				}).catch(err => {
					uni.showToast({
						title: err.msg || '提交失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F7FB;
	}

	.header {
		background-color: #FFAC3E;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 250rpx;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.header > .title {
		color: #fff;
		padding: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.content {
		margin-top: 100rpx;
		padding: 20rpx;
		box-sizing: border-box;
        position: relative;
	}

	.form-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-item:last-child {
		margin-bottom: 0;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.radio-group {
		display: flex;
		gap: 20rpx;
	}

	.radio-item {
		flex: 1;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
	}

	.radio-item.active {
		background: #FFAC3E;
		color: #FFFFFF;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: #FFAC3E;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.submit-btn:active {
		opacity: 0.8;
	}
</style> 